<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">考试成绩统计</a></el-breadcrumb-item>
      </el-breadcrumb>

      <div class="grid">
        <div class="item basic-info">
          <div class="title"><i class="el-icon-s-order"></i>基本信息</div>
          <div class="text">名称：{{ exam.name }}</div>
          <div class="text">科目：{{ exam.subject }}</div>
          <div class="text">状态：{{ exam.status }}</div>
          <div class="text">开始时间：{{ exam.startTime }}</div>
          <div class="text">结束时间：{{ exam.endTime }}</div>
          <div class="text">查看试卷：
            <el-link type="primary" @click="goToPaperDetail(exam.id, paper.id)" style="margin-right: 20px">试卷预览</el-link>
          </div>
        </div>
        <div class="item paper">
          <div class="title"><i class="el-icon-tickets"></i>统计信息</div>
          <div class="text">平均分：{{this.examAverage}}</div>
          <div class="text">最高分：{{this.examMax}}</div>
          <div class="text">中位数：{{this.examMedian}}</div>
          <div class="text">最低分：{{this.examMin}}</div>
        </div>
        <div class="item student">
          <div class="title"><i class="el-icon-document-checked"></i>统计图表</div>
          <div class="analysis-card">
            <!--  统计图表  -->
            <div style="width:800px;height:300px" ref="numScore"></div>
          </div>
          <div class="analysis-card">
            <div style="width:800px;height:300px" ref="averageByPoint"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getPaper} from '../../../api/exam'
import {
  getAverageByPoint,
  getExamAverage,
  getExamMax,
  getExamMedian,
  getExamMin,
  getNumByScore
} from '../../../api/teacherAnalysis'
export default {
  name: 'ExamMark',
  data () {
    return {
      // 考试信息
      exam: {
        createTime: '2022-03-26 14:41:56',
        endTime: '2022-04-26 00:00:00',
        id: 1,
        name: '计算机网络2022期末考试',
        startTime: '2022-04-25 22:00:00',
        status: '未开始',
        subjectId: 1,
        teacherId: 1234567890,
        updateTime: '2022-03-26 14:41:56'
      },
      paper: {
        createTime: '2022-04-02 15:59:13',
        examId: 10,
        id: 9,
        questionOrderJSONStr: '[]',
        scoreItemsJSONStr: '{"firstGroup":{"questionType":"radio","score":2,"total":10},"secondGroup":{"questionType":"multiple","score":4,"total":5},"thirdGroup":{"questionType":"filling","score":4,"total":5},"forthGroup":{"questionType":"shortAnswer","score":10,"total":4}}',
        updateTime: '2022-04-02 15:59:13'
      },
      // 统计数据
      numScore: {
        xAxis: [],
        series: []
      },
      averageByPoint: {
        avgValues: [],
        indicators: [],
        maxValues: []
      },
      examAverage: 0,
      examMax: 0,
      examMedian: 0,
      examMin: 0
    }
  },
  mounted () {
    this.exam = JSON.parse(this.$route.query.exam)
    this.getPaper(this.exam.id)
    this.getNumByScore()
    this.getExamAverage()
    this.getExamMax()
    this.getExamMedian()
    this.getExamMin()
  },
  methods: {
    // 跳转试卷预览
    goToPaperDetail (examId, paperId) {
      console.log(paperId)
      this.$router.push({path: '/exam/paper', query: {examId: examId, paperId: paperId}})
    },
    // 绘制图表
    initNumScoreCharts () {
      let that = this
      let myChart = this.$echarts.init(this.$refs.numScore)
      myChart.setOption({
        title: {
          text: '学生成绩分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: that.numScore.xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '60%',
            data: that.numScore.series
          }
        ]
      })
    },
    initAverageByPoint () {
      let that = this
      let myChart = this.$echarts.init(this.$refs.averageByPoint)
      myChart.setOption({
        title: {
          text: '知识点平均分'
        },
        color: ['#FF917C', '#56A3F1'],
        legend: {
          data: ['知识点得分', '知识点总分']
        },
        radar: {
          // shape: 'circle',
          indicator: that.averageByPoint.newIndicators
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: that.averageByPoint.avgValues,
                name: 'Allocated Budget'
              },
              {
                value: that.averageByPoint.maxValues,
                name: 'Actual Spending',
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value
                  }
                }
              }
            ]
          }
        ]
      })
    },
    // 获取试卷
    getPaper (examId) {
      let that = this
      getPaper(examId).then(res => {
        console.log(res)
        if (res.status === 200) {
          that.paper = res.data.data.list[0]
          this.getAverageByPoint()
        } else {
          that.hasPaper = false
        }
      })
    },
    // 获取知识点平均分
    getAverageByPoint () {
      getAverageByPoint(this.paper.id).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          let temp = res.data.data
          temp.newIndicators = []
          temp.indicators.forEach(indicator => {
            temp.newIndicators.push({max: indicator.max, name: indicator.text})
          })
          this.averageByPoint = temp
          this.initAverageByPoint()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取学生分数人数分布
    getNumByScore () {
      getNumByScore(this.exam.id).then(res => {
        console.log(res.data.data)
        if (res.data.errorCode === 0) {
          this.numScore.xAxis = res.data.data.xAxis
          this.numScore.series = res.data.data.series
          this.initNumScoreCharts()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取平均分
    getExamAverage () {
      getExamAverage(this.exam.id).then(res => {
        console.log(res.data.data)
        if (res.data.errorCode === 0) {
          this.examAverage = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取最高分
    getExamMax () {
      getExamMax(this.exam.id).then(res => {
        console.log(res.data.data)
        if (res.data.errorCode === 0) {
          this.examMax = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取中位数
    getExamMedian () {
      getExamMedian(this.exam.id).then(res => {
        console.log(res.data.data)
        if (res.data.errorCode === 0) {
          this.examMedian = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取最高分
    getExamMin () {
      getExamMin(this.exam.id).then(res => {
        console.log(res.data.data)
        if (res.data.errorCode === 0) {
          this.examMin = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .grid{
    margin: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row dense;
  }

  .item {
    text-align: left;
    border: 1px solid #e5e4e9;
  }

  .title {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 15px;
  }

  .basic-info {
    height: auto;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .paper {
    height: auto;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .student {
    height: auto;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .analysis-card {
    margin-top: 40px;
    margin-left: 15%;
    height:300px;
  }
</style>
